import React, { Component } from 'react';
import {Radio, Icon, Popover, Checkbox, Spin, message} from 'antd';
import { nestTableMenuService } from 'components/nest-table-menu/nest-table-menu.service';

import 'styles/components/nest-table-menu/nest-table-menu.scss';
import {deepCopy, messages} from 'share/common';

class NestTale extends Component {
  constructor (props) {
    super(props);
    this.state = {
      source: null,
      columns: [{
        width: 160,
        label: messages('common-1.key82')/*一级*/,
        render: () => {
          return <span>
            <span
              className={`icon icon-cursor`}
              onClick={() => this.onThIconClick('first', this.tableHeaderStatus['first'])}>
              {this.tableHeaderStatus['first'] ? '-' : '+'}
            </span>&nbsp;{messages('common-1.key82')/*一级*/}</span>;
        }
      }, {
        width: 160,
        label: messages('common-1.key83')/*二级*/,
        render: () => {
          return <span>
            <span
              className={`icon icon-cursor`}
              onClick={() => this.onThIconClick('second', this.tableHeaderStatus['second'])}>
              {this.tableHeaderStatus['second'] ? '-' : '+'}
            </span>
            &nbsp; {messages('common-1.key83')/*二级*/}
            </span>;
        }
      }, {
        width: 160,
        label: messages('common-1.key84')/*三级*/
      }, {
        width: 260,
        label: messages('common-1.key85')/*操作权限*/,
        render: function () {
          return (
            <span>{messages('common-1.key85')/*操作权限*/}
              <Popover content={messages('common-1.key86')/*操作权限决定按钮是否可点击*/}>
                &nbsp;<Icon type="info-circle-o" />
              </Popover>
            </span>);
        }
      },
      //   {
      //   width: 260,
      //   label: messages('common-1.key87')/*按钮权限*/,
      //   render: function () {
      //     return (
      //       <span>{messages('common-1.key87')/*按钮权限*/}
      //         <Popover content={messages('common-1.key88')/*按钮权限决定具体按钮是否可点击*/}>
      //           &nbsp;<Icon type="info-circle-o" />
      //         </Popover>
      //       </span>);
      //   }
      // }
      ],
    };
    this.openedUidWithChildrenMap = {}; // 展开关闭节点对应的子节点
    this.tableHeaderStatus = {
      first: true,
      second: true
    };
    this.openedUidMap = {}; // 存储展开关闭的节点 {true: 展开 false: 关闭}
    this.menuTree = {};
    this.menuMap = {};
    this.operationedMenu = {};
    this.tableWrapperRef= null;
    this.keyWord= ''
  }

  componentDidMount () {
    this.props.onRef && this.props.onRef(this);
    this.initMenuTree(this.props.dataSource);
    this.updateSource(this.props.dataSource);
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.dataSource !== this.props.dataSource) {
      this.keyWord= nextProps.keyWord
      this.menuTree = {};
      this.menuMap = {};
      this.operationedMenu = {};
      this.openedUidMap = {};
      this.openedUidWithChildrenMap = {};
      this.initMenuTree(nextProps.dataSource);
      this.updateSource(nextProps.dataSource);
    }
  }

  handleTrWidth=(ref)=>{
    if(ref && !this.tableWrapperRef){
      this.tableWrapperRef= ref
      let scrollWidth= this.tableWrapperRef.scrollWidth
      if(scrollWidth > 800){
        const singleWidth= parseInt(scrollWidth/4.8)
        let {columns}= this.state
        columns[0].width= singleWidth
        columns[1].width= singleWidth
        columns[2].width= singleWidth
        columns[3].width= (scrollWidth - singleWidth*3)
        // columns[4].width= (scrollWidth - singleWidth*3)/2
        this.setState({
          columns
        })
      }
    }

  }

  // 获取操作的菜单
  saveOperationedMenu = () => {
    let operationMenuList = [];
    for (let key in this.operationedMenu) {
      let menu = this.operationedMenu[key];
      if (menu.__checked__ != undefined) {
        delete menu.__checked__;
      }
      if (menu.__operationType__ != undefined) {
        delete menu.__operationType__;
      }
      operationMenuList.push(menu);
    }
    this.operationedMenu = {};
    return operationMenuList;
  };

  // 取消菜单操作
  cancelOperationedMenu = () => {
    for (let key in this.operationedMenu) {
      let menu = this.operationedMenu[key];
      if (menu.__checked__ != undefined) {
        menu.checked = menu.__checked__;
        delete menu.__checked__;
      }
      if (menu.__operationType__ != undefined) {
        menu.operationType = menu.__operationType__;
        delete menu.__operationType__;
      }
    }
    this.operationedMenu = {};
  };

  // 更新菜单树
  updateSource = (dataSource) => {
    let source = this.dataHandle(dataSource, 0);
    this.setState({
      source
    }, () => {
    });
  };
  // table头 展开收起 icon 操作 true为收起
  onThIconClick = (level, status) => {
    let toggledStatus= !status
    this.tableHeaderStatus[level] = toggledStatus;
    let resourceKeyMap = this.openedUidWithChildrenMap;
    Object.keys(resourceKeyMap).forEach(key => {
      let dataMap = resourceKeyMap[key];
      let hasChildren= dataMap && dataMap.length > 0
      if(level === 'first'){
        if(!toggledStatus){
          this.tableHeaderStatus['second'] = toggledStatus;
          this.openedUidMap[key] = toggledStatus;
        }else{
          if (hasChildren) {
            this.openedUidMap[key] = toggledStatus;
          }else{
            if(!this.menuTree[key].parentResourceKey){
              this.openedUidMap[key] = toggledStatus;
            }
          }
        }
      }
      if(level === 'second'){
        if(toggledStatus){
          this.tableHeaderStatus['first'] = toggledStatus;
          this.openedUidMap[key] = toggledStatus;
        }
        if (hasChildren) {
          dataMap.forEach(childKey => {
            this.openedUidMap[childKey] = toggledStatus;
          });
        }
      }
    });
    this.updateSource(this.props.dataSource);
  };
  // 展开收起 icon 操作
  onIconClick = (data) => {
    let resourceKey = data.resourceKey;
    if (this.openedUidMap[resourceKey] !== undefined) {
      let status = !this.openedUidMap[resourceKey];
      this.openedUidMap[resourceKey] = status;
      let uidMap = this.openedUidWithChildrenMap[resourceKey];
      if (uidMap && uidMap.length > 0) {
        uidMap.forEach(resourceKey => {
          if (status) {
            //   打开
            this.openedUidMap[resourceKey] = true;
          } else {
            //  关闭
            this.openedUidMap[resourceKey] = false;
          }
        });
      }
      this.updateSource(this.props.dataSource);
    }
  };
  // 处理app关联菜单的选中操作
  onAppReferenceChange = (status, item, resourceKey) => {
    let data= this.menuMap[resourceKey]
    this.onCheckboxChange(status, data, resourceKey, true);
  }
  // 菜单选中操作
  onCheckboxChange = (status, data, resourceKey, isFromAppReference) => {
    if(this.props.selectedRole.permissionCode === "superAdmin" &&
      ["role-management", "role-menu-setting", "role-permission-setting", "user-permission"].indexOf(data.key) !== -1 ){
      message.error(messages('common-1.key89')/*超级管理员不允许取消角色管理及其子菜单*/);
      return
    }
    data['__checked__'] === undefined && (
      data['__checked__'] = data.checked
    );
    let currentValue = status;
    if(currentValue && data.subFunctions){
      data.subFunctions.forEach(item=>{
        item.checked= currentValue
        this.operationedMenu[item.key]= item
      })
    }
    data.checked = currentValue;
    this.operationedMenu[data.key] = data;
    if (currentValue) {
      this.handleParentMenuSelected(resourceKey);
    }else{
      this.handleParentMenuUnSelected(resourceKey)
    }
    this.handleChildMenuOperationed(resourceKey, currentValue);
    this.updateSource(this.props.dataSource);
    if(!isFromAppReference){
      this.props.onMenuChanged(currentValue, data)
    }
  };
  // tab菜单权限
  onTabRadioChange = (e, data, tabInfo) => {
    let currentValue = e.target.value;
    let resourceKey = tabInfo.key;
    tabInfo['__checked__'] === undefined && (
      tabInfo['__checked__'] = tabInfo.checked,
        tabInfo['__operationType__'] = tabInfo.operationType); // 用于取消操作
    tabInfo.operationType = currentValue;
    tabInfo.checked = true;
    this.operationedMenu[resourceKey] = tabInfo;
    this.onRadioChange(e, data);
  };
  // 菜单按钮权限
  onButtonCheckChange = (e, data, buttonInfo) => {
    // console.log(e, data, buttonInfo)
    let currentValue = e.target.checked;
    let resourceKey = buttonInfo.key;
    buttonInfo['__checked__'] === undefined && (
      buttonInfo['__checked__'] = buttonInfo.checked,
        buttonInfo['__operationType__'] = buttonInfo.operationType); // 用于取消操作
    buttonInfo.checked = currentValue;
    this.operationedMenu[resourceKey] = buttonInfo;
    let eData = deepCopy(e)
    eData.target.value = 'RW';
    if (data.subFunctions && data.subFunctions.length) {
      this.onTabRadioChange(eData, data, buttonInfo);
    } else {
      this.onRadioChange(eData, data);
    }
  };
  // 功能菜单权限
  onRadioChange = (e, data) => {
    let currentValue = e.target.value;
    let resourceKey = data.key;
    if (data.operationType !== currentValue || data.checked !== true) {
      data['__checked__'] === undefined && (
        data['__checked__'] = data.checked,
          data['__operationType__'] = data.operationType); // 用于取消操作
      data.operationType = currentValue === 'H' ? 'RW' : currentValue;
      data.checked = true;
      this.operationedMenu[resourceKey] = data;
    }
    this.handleTabMenuSelected(data);
    this.handleParentMenuSelected(resourceKey);
    this.updateSource(this.props.dataSource);
  };
  // 处理 subfunction 选中
  handleTabMenuSelected= (resource) => {
    if(resource.subFunctions){
      resource.subFunctions.forEach(tabInfo=>{
        this.operationedMenu[tabInfo.key] = tabInfo;
      })
    }
  }
  // 父级菜单选中
  handleParentMenuSelected = (key) => {
    if (this.menuTree[key]) {
      let parentResourceKey = this.menuTree[key].parentResourceKey;
      if (!parentResourceKey) return;
      let parentMenu = this.menuMap[parentResourceKey];
      if (!parentMenu.checked) {
        parentMenu['__checked__'] === undefined && (
          parentMenu['__checked__'] = parentMenu.checked); // 用于取消操作
        parentMenu.checked = true;
        this.operationedMenu[parentResourceKey] = parentMenu;
      }
      this.handleParentMenuSelected(parentResourceKey);
    }
  };
  // 父级菜单是否去掉选中状态
  handleParentMenuUnSelected = (key) => {
    if (this.menuTree[key]) {
      let parentResourceKey = this.menuTree[key].parentResourceKey;
      if (!parentResourceKey) return;
      let parentMenu = this.menuMap[parentResourceKey];
      if (!parentMenu.checked) {
        parentMenu['__checked__'] === undefined && (
          parentMenu['__checked__'] = parentMenu.checked); // 用于取消操作
        // parentMenu.checked = true;
        // this.operationedMenu[parentResourceKey] = parentMenu;
      }
      if(parentMenu.checked){
        if(!parentMenu.children.some(child => child.checked)){
          parentMenu.checked = false
          this.operationedMenu[parentResourceKey] = parentMenu;
          this.handleParentMenuUnSelected(parentResourceKey);
        }
      }

    }
  };
  // 处理子菜单
  handleChildMenuOperationed = (key, status) => {
    if (this.menuTree[key]) {
      let childrenResourceKey = this.menuTree[key].children;
      let currentMenu = this.menuMap[key];
      if(currentMenu.buttons){
        currentMenu.buttons.forEach(item=>{
          item.checked= status
          this.operationedMenu[item.key]= item
        })
      }
      childrenResourceKey && childrenResourceKey.forEach(childKey => {
        if (this.menuMap[childKey]) {
          let chidMenu = this.menuMap[childKey];
          if (chidMenu.checked !== status) {
            chidMenu['__checked__'] === undefined && (
              chidMenu['__checked__'] = chidMenu.checked); // 用于取消操作
            if(chidMenu.subFunctions){
              chidMenu.subFunctions.forEach(item=>{
                item.checked= status
                this.operationedMenu[item.key]= item
              })
            }
            if(chidMenu.buttons){
              chidMenu.buttons.forEach(item=>{
                item.checked= status
                this.operationedMenu[item.key]= item
              })
            }
            if(chidMenu.relevanceDetails){
              this.props.onMenuChanged(status, chidMenu)
            }else{
              chidMenu.checked = status;
              this.operationedMenu[childKey] = chidMenu;
            }
          }
          this.handleChildMenuOperationed(childKey, status);
        }
      });
    }
  };
  // td宽度处理
  getTableTdWidth = (start, end = 2) => {
    let {columns} = this.state;
    return columns.reduce((result, item, index) => {
      if (index >= start && index <= end) {
        result += item.width;
      }
      return result;
    }, 0);
  };
  initMenuTree=(data, parentResourceKey)=>{
    data.forEach(item=>{
      let resourceKey = item.key;
      let hasChildren = item.children && item.children.length > 0;
      let hasSubFunction = item.subFunctions && item.subFunctions.length > 0;
      let hasButtons = item.buttons && item.buttons.length > 0;
      // menuTree构建
      if (!this.menuTree[resourceKey]) {
        this.menuTree[resourceKey] = {
          parentResourceKey: parentResourceKey
        };
        if (this.menuTree[parentResourceKey] && this.menuTree[parentResourceKey].children) {
          this.menuTree[parentResourceKey].children.push(resourceKey);
        }
        if (this.menuTree[parentResourceKey] && this.menuTree[parentResourceKey].subFunctions) {
          this.menuTree[parentResourceKey].subFunctions.push(resourceKey);
        }
        if (this.menuTree[parentResourceKey] && this.menuTree[parentResourceKey].buttons) {
          this.menuTree[parentResourceKey].buttons.push(resourceKey);
        }
        if (hasChildren) {
          this.menuTree[resourceKey].children = [];
        }
        if (hasSubFunction) {
          this.menuTree[resourceKey].subFunctions = [];
        }
        if (hasButtons) {
          this.menuTree[resourceKey].buttons = [];
        }
      }
      if (!this.menuMap[resourceKey]) {
        this.menuMap[resourceKey] = item;
      }
      if(hasChildren){
        this.initMenuTree(item.children, resourceKey);
      }
    })
  }
  dataHandle = (data, level = 0, parentResourceKey) => {
    let {columns} = this.state;
    return data.map(item => {
      let resourceKey = item.key;
      let tempResult = {
        level,
        iconType: null,
        data: item,
        resourceKey: resourceKey
      };
      let hasChildren = item.children && item.children.length > 0;
      let hasSubFunction = item.subFunctions && item.subFunctions.length > 0;
      let hasButtons = item.buttons && item.buttons.length > 0;
      // menuTree构建
      // if (!this.menuTree[resourceKey]) {
      //   this.menuTree[resourceKey] = {
      //     parentResourceKey: parentResourceKey
      //   };
      //   if (this.menuTree[parentResourceKey] && this.menuTree[parentResourceKey].children) {
      //     this.menuTree[parentResourceKey].children.push(resourceKey);
      //   }
      //   if (this.menuTree[parentResourceKey] && this.menuTree[parentResourceKey].subFunctions) {
      //     this.menuTree[parentResourceKey].subFunctions.push(resourceKey);
      //   }
      //   if (this.menuTree[parentResourceKey] && this.menuTree[parentResourceKey].buttons) {
      //     this.menuTree[parentResourceKey].buttons.push(resourceKey);
      //   }
      //   if (hasChildren) {
      //     this.menuTree[resourceKey].children = [];
      //   }
      //   if (hasSubFunction) {
      //     this.menuTree[resourceKey].subFunctions = [];
      //   }
      //   if (hasButtons) {
      //     this.menuTree[resourceKey].buttons = [];
      //   }
      // }
      // if (!this.menuMap[resourceKey]) {
      //   this.menuMap[resourceKey] = item;
      // }

      if (!hasChildren) {
        tempResult['width'] = this.getTableTdWidth(level, 2);
      } else {
        tempResult['width'] = columns[level] && columns[level].width;

        if (this.openedUidMap[resourceKey] === undefined) {
          if (this.keyWord) {
            this.openedUidMap[resourceKey] = false;
          } else {
            this.openedUidMap[resourceKey] = true;
          }
          this.openedUidWithChildrenMap[resourceKey] = [];
        }
        if (parentResourceKey) {
          if (this.openedUidWithChildrenMap[parentResourceKey]) {
            if (!this.openedUidWithChildrenMap[parentResourceKey].includes(resourceKey)) {
              this.openedUidWithChildrenMap[parentResourceKey].push(resourceKey);
            }
          } else {
            // console.log(parentResourceKey, resourceKey);
          }
        }
        if (!this.openedUidMap[resourceKey]) {
          //  只取第一个子元素
          tempResult['iconType'] = 'plus';
          if(this.keyWord){
            let children= item.children.filter(item=>item.matched)
            if(children.length === 0){
              children= [item.children[0]]
            }
            tempResult.children = this.dataHandle(children, level + 1, resourceKey);
          }else{
            tempResult.children = this.dataHandle([item.children[0]], level + 1, resourceKey);
          }
        } else {
          //  取所有子元素
          tempResult['iconType'] = 'minus';
          tempResult.children = this.dataHandle(item.children, level + 1, resourceKey);
        }
      }
      if (hasSubFunction) {
        tempResult.subFunctions = this.dataHandle(item.subFunctions, level + 1, resourceKey);
      }
      if (hasButtons) {
        tempResult.buttons = this.dataHandle(item.buttons, level + 1, resourceKey);
      }
      return tempResult;
    });
  };
  // 渲染关联菜单
  renderLinkedMenu=(item)=>{
    return <Popover content={
      <div>
        <div>{messages('common-1.key90')/*此功能存在关联功能，将同步操作关联功能。*/}</div>
        <div>{messages('common-1.key91')/*网页端功能*/}：
          {
            (item.relevanceDetails['web'] || []).map((web, index1) => {
              return (
                <span style={{marginRight: 10}}>
                  {web.resourceName}{(index1 === item.relevanceDetails['web'].length - 1) ? '' : '，'}
                </span>
              );
            })
          }
        </div>
        <div>{messages('common-1.key92')/*移动端功能*/}：
          {
            (item.relevanceDetails['app'] || []).map((app, index) => {
              return (
                <span style={{marginRight: 10}}>
                  {app.resourceName}{(index === item.relevanceDetails['app'].length - 1) ? '' : '，'}
                </span>
              );
            })
          }
        </div>
      </div>
    }>
      <Icon type="link" style={{color: '#4B8DFE', fontSize: 15, fontWeight: 600, marginRight: 7}}/>
    </Popover>
  }
  // 渲染名称，主要处理搜索时的数据高亮
  renderResourceName=(resourceName)=>{
    let {keyWord}= this
    if(keyWord && resourceName.toLowerCase().indexOf(keyWord.toLowerCase()) !== -1){
      return(
      <span dangerouslySetInnerHTML={{__html: resourceName.replace(new RegExp(`${keyWord.toLowerCase()}`, 'img'), function(arg1){
          return `<span style='color: #4B8DFF'>${arg1}</span>`})
      }} />
      )
    }else{
      return resourceName
    }
  }
  getTableTd = (data, hasBtnBorder, noBorder) => {
    let {isEdit} = this.props;
    let innerData = data.data;
    let hasChildren = data.children && data.children.length > 0;
    let isLastLevelMenu= !hasChildren && (innerData.resourceType === 'F' || innerData.resourceType === 'C')
    let hasSubFunctions = isLastLevelMenu && innerData.subFunctions && innerData.subFunctions.length > 0;
    let tdStyle = {display: 'flex', alignItems: 'stretch'};
    let tdLabelStyle = {flex: 'none', margin: 'auto 0'};
    let childrenLen = 0;
    if (hasChildren) {
      childrenLen = data.children.length;
    }
    let width= data.width - 1
    if(data.level === 0 ){
      width= data.width
      if(!hasChildren){
        width= data.width + 1
      }
    }
    tdLabelStyle['width']= width
    if (hasBtnBorder) {
      tdStyle['borderBottom'] = '1px solid #EBF0F5';
    }
    if (data.level && !noBorder) {
      tdStyle['borderBottom'] = '1px solid #EBF0F5';
    }
    if (isLastLevelMenu && !hasSubFunctions){
      // tdLabelStyle['borderRight']= '1px solid #EBF0F5';
      if(data.level >0 ){
        tdLabelStyle['width']= data.width
      }
    }
    // console.log('openedUidMap', this.openedUidMap);
    return (
      <div className={'nest-table-td'} style={tdStyle} key={innerData.key}>
        <div className={`td-label ${innerData.checked &&'td-label-checked'}`} style={tdLabelStyle}>
          {hasChildren?
            <span
              className={`icon icon-cursor`}
              onClick={() => this.onIconClick(data)}>
              {this.openedUidMap[data.resourceKey] ? '-' : '+'}
            </span>:
            (data.level === 2 ?
              null:
              <span className={'icon-placeholder'}>&nbsp;</span>)
          }
          <Checkbox
            disabled={!isEdit}
            indeterminate={innerData.indeterminate}
            checked={innerData.checked}
            onChange={(e) => this.onCheckboxChange(e.target.checked, innerData, data.resourceKey)}>
            {innerData.relevanceDetails && this.renderLinkedMenu(innerData)}
            {this.renderResourceName(innerData.resourceName)}
          </Checkbox>
        </div>
        {
          hasChildren &&
          <div className={'td-wrapper'}>
            {
              data.children.map((subMenu, index) => {
                return this.getTableTd(subMenu, 0, index === childrenLen - 1);
              })
            }
          </div>
        }
        {
          isLastLevelMenu && this.getActionNode(innerData)
        }
      </div>
    );
  };
  getActionNode = (resource) => {
    let {isEdit} = this.props;
    let {columns} = this.state;
    let tdStyle = { borderLeft: '1px solid #EBF0F5', height: '100%' };
    let tdStyleFlex = { };
    let hasSubFunctions = resource.subFunctions && resource.subFunctions.length > 0;
    return (
      <div>
        {!hasSubFunctions &&
        <div style={tdStyle} key={resource.key}>
          <div className={`nest-table-action ${hasSubFunctions ? 'action-has-subs' : ''}`}
               style={{'width': columns[3].width-1}}>
            <Radio.Group onChange={(e) => this.onRadioChange(e, resource)}
                         value={resource.checked && resource.operationType}>
              <Radio disabled={!isEdit || Number(resource.defaultReadable) == 1}
                     value={'R'}>{messages('common.view')/*查看*/}</Radio>
              <Radio disabled={!isEdit || Number(resource.defaultReadable) == 0}
                     value={'RW'}>{messages('common.edit')/*编辑*/}</Radio>
            </Radio.Group>
          </div>
          {
            this.getButtonNode(resource, (resource.checked && resource.operationType))
          }
        </div>
        }
        {
          hasSubFunctions &&
          <div className={`nest-table-action ${hasSubFunctions ? 'action-has-subs' : ''}`}
               style={{'width': (columns[3].width)}}>
            <div className={`action-mulity`}>
              {
                resource.subFunctions.map(tabInfo => {
                  return <div style={tdStyleFlex} className="single-tab-info" key={tabInfo.key}>
                    <div className={'tab-info-wrapper'} style={{'width': (columns[3].width + 2)}}>
                      <div className="tab-label">{tabInfo.resourceName}</div>
                      <div className="tab-content">
                        <Radio.Group onChange={(e) => this.onTabRadioChange(e, resource, tabInfo)}
                                     value={resource.checked && tabInfo.operationType}>
                          <Radio disabled={!isEdit || Number(resource.defaultReadable) == 1}
                                 value={'R'}>{messages('common.view')/*查看*/}</Radio>
                          <Radio disabled={!isEdit || Number(resource.defaultReadable) == 0}
                                 value={'RW'}>{messages('common.edit')/*编辑*/}</Radio>
                          <Radio disabled={!isEdit} value={'H'}>{messages('common-1.key93')/*不可见*/}</Radio>
                        </Radio.Group>
                      </div>
                    </div>
                    {tabInfo['buttons'] && tabInfo['buttons'].length &&
                      this.getButtonNode(tabInfo, (resource.checked && tabInfo.operationType))
                    }
                  </div>
                })
              }
            </div>
          </div>
        }
      </div>
    );
  };

  getButtonNode = (resource, isUpRadioChecked) => {
    let {isEdit} = this.props;
    let hasButtons = resource.buttons && resource.buttons.length > 0;

    return (
      <div className="nest-table-buttons" style={{borderTop: hasButtons ? '1px solid #EBF0F5' : ''}}>
        {
          hasButtons ?
            <div className="nest-table-buttons-box" style={{margin: 'auto 0'}}>
              <div>
                {resource.buttons.map((item)=>{
                  return (

                    <Checkbox
                      checked={resource.checked && item.checked}
                      disabled={!(isEdit && isUpRadioChecked === 'RW')}
                      onChange={(e)=>{this.onButtonCheckChange(e, resource, item)}}
                    >
                      {item.resourceName}
                      {nestTableMenuService[item.key] &&
                        <Popover content={nestTableMenuService[item.key]}>
                          <Icon style={{marginLeft: 8}} type="info-circle-o" />
                        </Popover>
                      }
                    </Checkbox>
                  )
                })}
              </div>
              </div> : null
        }
      </div>
    )

  }

  render () {
    let {source, columns} = this.state;
    let thWidth = columns.reduce((result, item, index) => {
      return result + item.width;
    }, 0);
    if (!source) return <Spin spinning={true}/>;
    return (
      <div className="nest-table-wrapper" ref={(ref)=>this.handleTrWidth(ref)}>
        <div className="nest-table-th" style={{width: thWidth}}>
          {
            columns.map(column => {
              return (
                <div className={'nest-table-td'} style={{width: column.width}}>
                  <span className={'text'}>
                    {
                      column.render ? column.render() : column.label
                    }
                  </span>
                </div>
              );
            })
          }
        </div>
        {/*<div className="nest-table-tr" style={{'width': thWidth, height: '40px'}}></div>*/}
        { source.length ===0 && <div style={{marginTop: 10, textAlign: 'center'}}>{messages('common-1.key94')/*无相关菜单*/}</div>}
        {
          source.map(data => {
            return (
              <div className="nest-table-tr" style={{'width': thWidth}}>
                {this.getTableTd(data, true)}
              </div>
            );
          })
        }
      </div>
    );
  }
}

NestTale.PropTypes = {
  height: React.PropTypes.string,
  width: React.PropTypes.string,
  isEdit: React.PropTypes.bool,
  columns: React.PropTypes.array,
  dataSource: React.PropTypes.array,
  onRef: React.PropTypes.func,
  keyWord: React.PropTypes.string,
  onMenuChanged: React.PropTypes.func, // 关联功能改变
  selectedRole: React.PropTypes.object, // 关联功能改变
};
NestTale.defaultProps = {
  columns: [],
  isEdit: false,
  dataSource: [],
  selectedRole: {},
};
export default NestTale;
